﻿
.line-chart{
}

    .line-chart div {
        background:white;
        border: white;
        border-style: solid;
        border-width: 1px;
    }

    .line-chart div svg{
    }

    .line-chart div svg .background-rect{
        width:100%;
        height:100%;
        fill:white;
        stroke:lightgray;
        stroke-width:0.5;            
    }

    .line-chart div svg .horizontal-grid-lines{
        fill:none;
        stroke:gray;
        stroke-width:0.2;
    }

    .line-chart div svg .y-axis-labels{
        font-size:4px;
        text-anchor:end;
    }

    .line-chart div svg .vertical-grid-lines{        
        fill:none;
        stroke:gray;
        stroke-width:0.2;
    }

    .line-chart div svg .x-axis-labels{
        font-size:4px;
        text-anchor:middle;
    }

    .line-chart div svg .line-1{
        fill:none;
        stroke:#ce4b99;
        stroke-width: 1.0;
    }
    .line-chart div svg .line-2{
        fill:none;
        stroke:#27A844;
        stroke-width: 1.0;
    }
    .line-chart div svg .line-3{
        fill:none;
        stroke:#377bbc;
        stroke-width: 1.0;
    }
    .line-chart div svg .line-4{
        fill:none;
        stroke:#fe2712;
        stroke-width: 1.0;
    }
    .line-chart div svg .line-5{
        fill:none;
        stroke:#fc600a;
        stroke-width: 1.0;
    }
    .line-chart div svg .line-6{
        fill:none;
        stroke:#fb9902;
        stroke-width: 1.0;
    }
    .line-chart div svg .line-7{
        fill:none;
        stroke:#fccc1a;
        stroke-width: 1.0;
    }
    .line-chart div svg .line-8{
        fill:none;
        stroke:#fefe33;
        stroke-width: 1.0;
    }
    .line-chart div svg .line-9{
        fill:none;
        stroke:#b2d732;
        stroke-width: 1.0;
    }
    .line-chart div svg .line-10{
        fill:none;
        stroke:#66b032;
        stroke-width: 1.0;
    }

    .line-chart div .key{
        margin: 20px;
    }

    .line-chart div .key [class*="legend-"] {
        margin: 5px;
        margin-right: 10px;
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        /*
        width: 26px;
        height: 26px;
        */
        border-radius: 50%;
    }

    .line-chart div figcaption .key-list {
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 0.9em;
    }

    .line-chart div figcaption .key-list li {
        margin: 0 0 8px;
        padding: 0;

    }

    .line-chart div figcaption ul .legend-1 {
        background:#ce4b99;
        transform: translateY(-0.1em);
    }
    .line-chart div figcaption ul .legend-2 {
        background:#27A844;
        transform: translateY(-0.1em);
    }
    .line-chart div figcaption ul .legend-3 {
        background:#377bbc;
        transform: translateY(-0.1em);
    }
    .line-chart div figcaption ul .legend-4 {
        background:#fe2712;
        transform: translateY(-0.1em);
    }
    .line-chart div figcaption ul .legend-5 {
        background:#fc600a;
        transform: translateY(-0.1em);
    }
    .line-chart div figcaption ul .legend-6 {
        background:#fb9902;
        transform: translateY(-0.1em);
    }
    .line-chart div figcaption ul .legend-7 {
        background:#fccc1a;
        transform: translateY(-0.1em);
    }
    .line-chart div figcaption ul .legend-8 {
        background:#fefe33;
        transform: translateY(-0.1em);
    }
    .line-chart div figcaption ul .legend-9 {
        background:#b2d732;
        transform: translateY(-0.1em);
    }
    .line-chart div figcaption ul .legend-10 {
        background:#66b032;
        transform: translateY(-0.1em);
    }


